<template>
  <div class="appContent">
    <div class="searchTip" v-show="!isShowSearch">
      <i class="el-icon-arrow-down" style="font-size: 20px"></i>
    </div>
    <div class="moveBox" @mouseover="showSearch" @mouseleave="hideSearch">
      <div
        class="searchBox"
        :class="isShowSearch ? 'swing-in-top-fwd' : 'slide-out-top'"
      >
        <div class="search">
          <el-select
            v-model="equipment"
            @visible-change="visibleSlect"
            placeholder="请选择设备"
            :popper-append-to-body="false"
            autocomplete
            @change="equipmentChange"
            clearable
            filterable
          >
            <el-option
              v-for="item in searchList"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="titleBox">
      <span class="title"
        >{{ this.searchItem.Name }} / {{ this.searchItem.Code }}</span
      >
      <!-- <el-tooltip
        class="item"
        :value="true"
        effect="dark"
        :content="filterStatus(deviceInfo.State)"
        placement="left"
        :manual="true"
      >
        
      </el-tooltip> -->

      <div class="status" style="width: 40; height: 40px">
        <div class="tip">{{ filterStatus(deviceInfo.State) }}</div>
        <div>
          <i class="iconfont icon-gaojing" :class="deviceInfo.State"></i>
        </div>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="10">
        <div>
          <div class="equipmentBox">
            <div class="bgColor"></div>
            <div class="title">设备信息</div>
            <ul>
              <li>
                <span class="infoTitle">设备编号:</span
                >{{ deviceInfo.Device.Code }}
              </li>
              <li>
                <span class="infoTitle">设备分类:</span
                >{{ deviceInfo.Device.ClassificationName }}
              </li>
              <li>
                <span class="infoTitle">绑定程序:</span
                >{{ deviceInfo.Device.programName }}
              </li>
              <li>
                <span class="infoTitle">装夹时间（分）:</span
                >{{ deviceInfo.Program.ClampLength }}
              </li>
              <li>
                <span class="infoTitle">稼动率基准时间（分）:</span
                >{{ deviceInfo.Device.MonetaryLength }}
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="14"
        ><div class="rightBox">
          <div class="bgColor"></div>
          <div>
            <div class="processBox">
              <div>
                <span class="title"> 正在加工：</span
                >{{ deviceInfo.RunProgram }}
              </div>
              <!-- <el-progress
                type="circle"
                :format="formatCentent"
                :percentage="deviceInfo.process"
              ></el-progress> -->
              <div class="echartsCircle" id="echartsCircle"></div>
            </div>
            <div id="mains" style="width: 100%; height: 300px"></div>
          </div></div
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
        ><div class="alertStatusBox">
          <div class="bgColor"></div>
          <div class="title">
            报警状态
            <div class="status">
              <div class="tip">
                {{ deviceInfo.Alarm.State == "有报警" ? "有报警" : "无报警" }}
              </div>
              <div class="micon">
                <i
                  class="iconfont icon-gaojing"
                  :class="deviceInfo.Alarm.State == '有报警' ? 'red' : 'grren'"
                ></i>
              </div>
            </div>
          </div>
          <div class="subTitle">警报信息:</div>
          <div class="content">
            <ul>
              <li v-for="(item, index) in deviceInfo.Alarm.Infos" :key="index">
                <div>{{ item.TValue }}</div>
                <div>{{ dateFilters(item.StartTime) }}</div>
              </li>
            </ul>
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script>
//import echarts from 'echarts'

import {
  GetDeviceList,
  GetDeviceStatusDetail,
  GetDictionary,
  GetProgramList,
} from "@/api/index";
export default {
  name: "equipmentdetail",

  data() {
    return {
      searchList: [],
      myChart: "",
      myChart2: "",
      isShowSearch: false,
      selectIsOpen: false,
      equipment: "",
      options: [
        {
          value: "选项1",
          label: "生产线1",
        },
        {
          value: "选项2",
          label: "加工中心",
        },
        {
          value: "选项3",
          label: "滚丝机",
        },
        {
          value: "选项4",
          label: "车床",
        },
        {
          value: "选项5",
          label: "VM产线",
        },
      ],
      devicePage: {
        PageIndex: 1,
        PageSize: 10000,
      },
      searchItem: {
        Code: "",
        Name: "",
      },
      deviceInfo: {
        Device: {
          Code: "",
          MonetaryLength: "",
          ClassificationName: "",
          WorkNums: [],
          programName: "",
        },
        Alarm: {
          Infos: [],
          State: "",
        },
        Program: {
          ClampLength: "",
        },
        RunProgram: "",
        RunTime: "",
        process: 0,
      },
      dictionaryList: [],
      programData: [],
    };
  },
  mounted() {
    this.getPorgramList();
    this.getSearchList();
    this.getDictionaryFun();

    window.addEventListener("resize", this.resize, true);
  },
  methods: {
    filterStatus(status) {
      let val = "";
      switch (status) {
        case "START":
          val = "启动";
          break;
        case "STOP":
          val = "停止";
          break;
        case "HOLD":
          val = "暂停";
          break;
        case "RESET":
          val = "复位";
          break;
        case "RESTART":
          val = "程序";
          break;
        case "MSTR":
          val = "手动";
          break;
        case "ERROR":
          val = "关机";
          break;
      }
      return val;
    },
    initCir() {
      var chartDom = document.getElementById("echartsCircle");
      let myChart = this.$echarts.init(chartDom);
      this.myChart2 = myChart;
      let option;
      option = {
        series: [
          {
            name: "Pressure",
            type: "gauge",
            progress: {
              show: true,
              overlap: true,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#1D86DE",
              },
              roundCap: true,
            },
           radius: '100%',
            pointer: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              roundCap: true,
            },
            axisLabel: {
              show: false,
            },
            anchor: {
              show: false,
              showAbove: false,
              size: 25,
              itemStyle: {
                borderWidth: 10,
              },
            },
            data: [
              {
                value: this.deviceInfo.process,
                name: "OEE",
                title: {
                  // offsetCenter: ["0%", "-30%"],
                  color: "white",
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ["0%", "-20%"],
                  fontSize: "20px",
                },
              },
            ],
            detail: {
              color: "white",
              formatter: "{value}%",
              // itemStyle:{
              //   fontSize:'14px'
              // }
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    equipmentChange(val) {
      this.searchItem = this.searchList.find((item) => item.ID == val);
      this.GetDeviceStatusDetailFun();
    },
    async getPorgramList() {
      try {
        let query = {
          PageIndex: 1,
          PageSize: 10000,
        };
        let res = await GetProgramList(query);
        this.programData = res.Data.List;
      } catch (error) {
        console.log(error);
      }
    },
    dateFilters(value) {
      var year = 24 * 60 * 60 * 1000 * 365;
      var month = 24 * 60 * 60 * 1000 * 30;
      var day = 24 * 60 * 60 * 1000;
      var hour = 60 * 60 * 1000;
      var minute = 60 * 1000;

      var newDate = new Date().getTime();
      var time = new Date(value).getTime();
      var date = newDate - time;

      var years =
        parseInt(date / year) > 0 ? `${parseInt(date / year)}年前` : "";
      var months =
        parseInt(date / month) > 0 ? `${parseInt(date / month)}月前` : "";
      var days = parseInt(date / day) > 0 ? `${parseInt(date / day)}天前` : "";
      var hours =
        parseInt(date / hour) > 0 ? `${parseInt(date / hour)}小时前` : "";
      var minutes =
        parseInt(date / minute) > 0 ? `${parseInt(date / minute)}分钟前` : "";

      if (years.length != 0) {
        return years;
      } else if (months.length != 0) {
        return months;
      } else if (days.length != 0) {
        return days;
      } else if (hours.length != 0) {
        return hours;
      } else if (minutes.length != 0) {
        return minutes;
      } else {
        return parseInt(date / 1000) > 0 ? `${parseInt(date / 1000)}秒前` : "";
      }
    },
    async getDictionaryFun() {
      try {
        let query = {
          Key: "Device",
        };
        let res = await GetDictionary(query);
        if (res.Result && res.Data?.length) {
          this.dictionaryList = res.Data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    async GetDeviceStatusDetailFun() {
      try {
        let query = {
          Code: this.searchItem.Code,
        };
        let res = await GetDeviceStatusDetail(query);
        this.deviceInfo = res.Data;
        if (!this.deviceInfo.Program) {
          this.deviceInfo.Program = {};
        }
        // if (!this.deviceInfo.Device.Classification) return;
        this.dictionaryList.forEach((item) => {
          if (item.Value == this.deviceInfo.Device.Classification) {
            this.deviceInfo.Device.ClassificationName = item.Text;
            if (this.deviceInfo.Device?.MonetaryLength) {
              this.deviceInfo.process =
                parseInt(
                  this.deviceInfo.RunTime /
                    60 /
                    this.deviceInfo?.Device?.MonetaryLength
                ) * 100;
            }

            this.programData.map((item) => {
              console.log(this.deviceInfo.Device.ID_Program, item.ID);
              if (item.ID == this.deviceInfo.Device.ID_Program) {
                this.deviceInfo.Device.programName = item.Name;
              }
            });
          }
        });

        this.drawLine("main");
        this.initCir();
      } catch (error) {
        console.log(error);
      }
    },
    async getSearchList() {
      try {
        let query = {
          ...this.devicePage,
        };
        let res = await GetDeviceList(query);
        this.searchList = res.Data.List;
        if (this.$route.query.Code) {
          this.searchItem.Code = this.$route.query.Code;
          this.searchItem.Name = this.$route.query.Name;
        } else {
          this.searchItem = this.searchList?.[0];
        }
        this.GetDeviceStatusDetailFun();
      } catch (error) {
        console.log(error);
      }
    },
    visibleSlect(bool) {
      setTimeout(() => {
        if (!bool) this.isShowSearch = false;
        this.selectIsOpen = bool;
      });
    },
    showSearch() {
      this.isShowSearch = true;
    },
    hideSearch() {
      setTimeout(() => {
        if (!this.selectIsOpen) {
          this.isShowSearch = false;
        }
      }, 200);
    },
    formatCentent(val) {
      return "OEE " + val + "%";
    },
    // 折线图
    drawLine() {
      var chartDom = document.getElementById("mains");
      var myChart = this.$echarts.init(chartDom);
      this.myChart = myChart;
      var option;
      let xData = this.deviceInfo.WorkNums?.map((item) => {
        let str = item.Day.slice(5, 10);
        return str;
      });
      let yData = this.deviceInfo.WorkNums?.map((item) => {
        return item.Value;
      });
      option = {
        title: {
          text: "加工零件数",
          textStyle: {
            color: "white",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   // data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        //   textStyle:{
        //     color:'white'
        //   }
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              type: "solid",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          minInterval: 1,
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },

        series: [
          {
            name: "零件数",
            type: "line",
            stack: "Total",
            data: yData,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    resize() {
      this.myChart.resize();
      this.myChart2.resize();
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.resize, true);
  },
};
</script>

<style lang="scss" scoped>
.echartsCircle {
  width: 140px;
  height: 140px;
}
$START: #0eca79;
$STOP: #ff3e3e;
$HOLD: #1c98fd;
$RESET: #a067fd;
$RESTART: #ff8f3e;
$MSTR: #0bcfcf;
$ERROR: #a1a1a1;

$green: #0a9f5e;
$red: #ff3535;
.START {
  color: $START;
}

.STOP {
  color: $red;
}

.HOLD {
  color: $HOLD;
}

.RESET {
  color: $RESET;
}
.RESTART {
  color: $RESTART;
}
.MSTR {
  color: $MSTR;
}
.ERROR {
  color: $ERROR;
}

.green {
  color: $green;
}
.red {
  color: $red;
}
.searchTip {
  margin: auto;
  position: absolute;
  color: white;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  cursor: pointer;
  top: 0;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  background-color: skyblue;
  border-radius: 10px;
  width: 8px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: rgb(171, 171, 173);
  border-radius: 4px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: rgb(221, 217, 219);
  border-radius: 4px;
}

.alertStatusBox {
  position: relative;
  margin-top: 20px;
  z-index: 1;
  padding: 20px;
  border-radius: 10px;
  &:hover {
    box-shadow: 0px 0px 10px white;
  }
  .content {
    ul {
      overflow-y: scroll;
      height: 25vh;
      // background-color: rgb(55, 57, 177);
      // padding:0 20px;
      border: 1px solid rgb(73, 102, 141);
      border-radius: 10px;
      li {
        display: flex;
        justify-content: space-between;
        &:nth-child(odd) {
          background-color: rgb(13, 58, 104) !important;
          opacity: 0.9;
        }
      }
    }
  }
  .subTitle {
    margin: 10px 0;
    font-weight: bold;
  }
  .title {
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    .status {
      float: right;
      display: flex;
      align-items: center;
      .tip {
        padding: 6px 10px;
        background-color: rgb(13, 88, 163);
        border-radius: 4px;
        position: relative;
        font-size: 16px;
        font-weight: normal;
        &::after {
          content: "";
          width: 0;
          height: 0;
          border: 8px solid transparent;
          right: -16px;
          border-left: 8px solid rgb(13, 88, 163) !important;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .micon {
        margin-left: 20px;
        i {
          font-weight: bold;
          font-size: 40px;
        }
      }
    }
  }
}

:deep(.el-progress__text) {
  color: white;
}
.rightBox {
  position: relative;
  right: 0;
  top: 0;
  z-index: 1;
  height: 50vh;
  border-radius: 10px;
  padding: 20px;
  &:hover {
    box-shadow: 0px 0px 10px white;
  }
}
.moveBox {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  z-index: 1100;
  .searchBox {
    height: 30px;
    width: 100%;
    // background-image: linear-gradient(
    //   to top,
    //   rgba(255, 0, 0, 0),
    //   rgb(177, 180, 182)
    // );
    .search {
      position: absolute;
      top: 20px;
      z-index: 1120;
      height: 30px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
    }
  }
}
:deep(.searchBox) {
  .search {
    .el-select {
      border: none !important;
      display: flex;
      .el-input__inner {
        border-radius: 4px 4px 0 0;
        background-color: rgb(13, 88, 163) !important;
        opacity: 0.9;
        color: white;
        border: none;
        &::placeholder {
          color: rgb(236, 235, 235);
        }
      }
      .el-popper {
        margin-top: 0 !important;
        left: 0 !important;
        background-color: rgb(13, 88, 163) !important;
        border: none;
        opacity: 0.9;
        border-radius: 0 0 4px 4px;

        .el-select-dropdown__item {
          color: white !important;
        }
        .el-select-dropdown__item.hover {
          background-color: rgb(9, 64, 119);
        }
        .popper__arrow {
          left: 0 !important;
          display: none;
        }
        &::after {
          content: "";
          top: 0px;
          margin-left: 0px;
          border-top-width: 0;
          border-bottom-color: #ffffff;
        }
      }
    }
  }
}
.appContent {
  color: white;
  position: relative;
}
.processBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-weight: bold;
    font-size: 16px;
  }
}
::v-deep .titleBox {
  text-align: center;
  margin-bottom: 20px;
  .el-tooltip__popper.is-dark {
    background-color: #365ca9;
  }
  .el-tooltip__popper {
    background-color: #365ca9;
  }
  .title {
    font-weight: bold;
    margin-right: 30px;
    font-size: 20px;
  }
  .status {
    float: right;
    margin-right: 20px;
    display: flex;
    align-items: center;
    // border:1px solid red;
    // border-radius: ;
    .tip {
      padding: 6px 10px;
      background-color: rgb(13, 88, 163);
      border-radius: 4px;
      position: relative;
      font-size: 16px;
      &::after {
        content: "";
        width: 0;
        height: 0;
        border: 8px solid transparent;
        right: -16px;
        border-left: 8px solid rgb(13, 88, 163) !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    i {
      font-weight: bold;
      margin-left: 20px;
      font-size: 40px;
    }
  }
}
.equipmentBox {
  // border: 1px solid #ddd;
  z-index: 10 !important;
  position: relative;
  padding: 20px;
  height: 50vh;
  border-radius: 10px;
  .title {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    z-index: 100;
  }
  &:hover {
    box-shadow: 0px 0px 10px white;
  }
  ul {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
  }
}
.infoTitle {
  display: inline-block;
  width: 180px;
  text-align: right;
  word-break: keep-all;
  white-space: nowrap;
  margin-right: 10px;
}
li {
  padding: 6px;
  list-style: none;
}
</style>
